<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抢宿舍</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<div>
  注意：认证码为6位
</div>
<div>
  你的认证码：<input type="text" id="authCode" value=""/>
</div>
<div>
  同住人认证码：  <input type="text" id="otherAuthCode" value=""/>
  <button id="btn1">添加同住人</button>
  <div id="otherAuthCodes">

  </div>
</div>

<div id="building">
  可选的宿舍楼：

</div>
<div>
  <button id="btn2">抢宿舍</button>
</div>

<div id="grabResult"></div>

</body>
<script type="text/javascript">
  $(document).ready(function () {
    var token = localStorage.getItem("token")
    $.ajax({
      type: 'get',
      url: 'http://localhost:8091/order/getBuildings',
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      dataType: 'json',
      data: {token},
      success: function (data){
        console.log(data)
        for(let i=0; i<data.length; i++){
          let a = '<input type="radio" name="choice" value="' + data[i] + '">';
          a += '<label for="choice' + (i+1)+'">' + data[i] +'</label>';
          $("#building").append(a);
        }
      }
    })
    let codes = [];
    //这部分不需要与数据库交互
    $("#btn1").click(function (){
      //添加同住人
      let otherAuthCode = $("#otherAuthCode").val();
      if(otherAuthCode !== ""){
        //判断是否为6为
        if(otherAuthCode.length !== 6){
          alert("认证码长度不为6！");
          return;
        }
        codes.push(otherAuthCode);
        $("#otherAuthCode").val("");
        $("#otherAuthCodes").text(codes);
      }
    })

    //抢宿舍
    $("#btn2").click(function (){
      var myAuthCode = $("#authCode").val();
      var choiceBuilding = $("#building input[name=\"choice\"]:checked").val();
      console.log(myAuthCode)
      console.log(codes)
      console.log(choiceBuilding)
      $.ajax({
        type: 'post',
        url: 'http://localhost:8091/order/grabDorm',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'json',
        traditional: true,
        data: {
          myAuthCode,
          codes,
          choiceBuilding,
          token
        },
        success: function (data){
          //返回抢宿舍成功与否的相关信息
          console.log(data)
          if(data.status==1){
            $("#grabResult").html("")
            $("#grabResult").append("恭喜你，抢宿舍成功！宿舍信息如下：<br />")
            $("#grabResult").append("楼号："+data.data.buildingName+"<br />")
            $("#grabResult").append("宿舍号："+data.data.roomName+"<br />")
            if(data.data.gender === "0"){
              $("#grabResult").append("性别：男"+"<br />")
            }else{
              $("#grabResult").append("性别：女"+"<br />")
            }
            for(var i=0; i<data.data.studentInfo.length; i++){
              $("#grabResult").append("宿舍成员" + (i+1) + "：" +
                      data.data.studentInfo[i].number +" "+
                      data.data.studentInfo[i].name +
                      "<br />")
            }
          }else if(data.status == 400){
            $("#grabResult").html("")
            $("#grabResult").append(data.msg+"<br />")
          }

        }
      })
    })
  })
</script>
</html>